/* eslint-disable import/first */
import React from 'react';
import { connect } from 'dva';
import styles from './ListShow.css';
import { Table, Pagination, Popconfirm, Input } from 'antd';
import { PAGE_SIZE } from '../../constants';
import { routerRedux } from 'dva/router';
import UpdateUser from './UpdateUser';

function ListShow({ dispatch, message, loading, total, page: current, queryStr }) {
  function deleteUser(record) {
    dispatch({
      type: 'mydemo/deleteUser',
      payload: record.id,
    });
  }
  function updateUser({ user }) {
    dispatch({
      type: 'mydemo/updateUser',
      payload: user,
    });
  }
  function pageChangeHandler(page) {
    dispatch(routerRedux.push({
      pathname: '/mydemo',
      query: { page, queryStr },
    }));
  }
  function onSearch(value) {
    const page = 1;
    dispatch(routerRedux.push({
      pathname: '/mydemo',
      query: { page, queryStr: value },
    }));
  }

  const columns = [{
    title: '编号',
    dataIndex: 'id',
  }, {
    title: '名字',
    dataIndex: 'name',
  }, {
    title: '年龄',
    dataIndex: 'age',
  }, {
    title: '更新时间',
    dataIndex: 'updateTime',
    render: (text) => {
      const newDate = new Date();
      newDate.setTime(text);
      return newDate.toLocaleString();
    },
  }, {
    title: 'Edit',
    render: (text, record) => {
      return (
        <UpdateUser record={record} updateUser={updateUser} />
      );
    },
  }, {
    title: 'Delete',
    render: (text, record) => {
      return (
        <Popconfirm title="Confirm to delete?" onConfirm={deleteUser.bind(null, record)}>
          <a href="">Delete</a>
        </Popconfirm>
      );
    },
  }];
  return (
    <div className={styles.normal}>
      <Input.Search
        placeholder="input search text"
        style={{ width: 200 }}
        onSearch={onSearch}
      />
      <Table
        columns={columns}
        rowKey={record => record.id}
        loading={loading}
        dataSource={message.dataList}
        pagination={false}
      />
      <Pagination
        className="ant-table-pagination"
        total={total}
        current={current}
        pageSize={PAGE_SIZE}
        onChange={pageChangeHandler}
      />
    </div>
  );
}

function mapStateToProps(state) {
  const { message, total, page, queryStr } = state.mydemo;
  return {
    loading: state.loading.models.mydemo,
    message,
    total,
    page,
    queryStr,
  };
}

export default connect(mapStateToProps)(ListShow);
